<template>
  <!--packageF/sachertorte/sachertorteGoods/sachertorteGoods.wxml-->
  <div id="sachertorteGoods" :style="{ '--color': `${themeColor}` }">
    <c-title :hide="false" text="商品详情"></c-title>
    <div class="goods-img">
      <swiper :options="swiperOption" v-if="getGoods.thumb_url && getGoods.thumb_url.length">
        <swiper-slide v-for="(item, index) in getGoods.thumb_url" :key="index">
          <img :src="item" />
        </swiper-slide>
      </swiper>
      <div class="swiper-pagination" :class="beginStatus === 2 ? 'swiper-purchase' : ''"></div>
      <div class="goods-img-top flex-a-c flex-j-sb">
        <div class="goods-next flex-a-c flex-j-c" @click="backOn">
          <span class="iconfont icon-member-left"></span>
        </div>
        <div class="goods-next flex-a-c flex-j-c" @click="gotoMember">
          <span class="iconfont icon-fontclass-huiyuanzhongxin"></span>
        </div>
      </div>
      <div class="goods-img-bootom flex-a-c flex-j-sb" v-if="beginStatus === 2">
        <div class="goods-logo flex-a-c">
          <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/cake/purchase-logo.png" />
          <span class="iconfont icon-naozhong"></span>
        </div>
        <div class="cake-goods">
          <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/cake/cake-goods.png" />
        </div>
        <div class="goods-time ">
          <div class="flex-a-c time-wrap">
            <span class="time-title">剩余秒杀时间：</span>
            <van-count-down use-slot :time="promotionEndTime" @change="onTimeChange">
              <template #default="timeData">
                <span class="time-item">{{ timeData.days }}</span>
                <span class="days">天</span>
                <span class="time-item">{{ timeData.hours }}</span>
                <span class="time-label">:</span>
                <span class="time-item">{{ timeData.minutes }}</span>
                <span class="time-label">:</span>
                <span class="time-item">{{ timeData.seconds }}</span>
              </template>
            </van-count-down>
          </div>
        </div>
      </div>
    </div>
    <div class="goods-designation">
      <div class="goods-price flex-a-c">
        <div class="price" v-if="getGoods.min_price === getGoods.max_price"><span>￥</span>{{ getGoods.min_price }}</div>
        <div class="price" v-else-if="getGoods.has_many_options.length > 1"><span>￥</span>{{ getGoods.min_price }}-<span>￥</span>{{ getGoods.max_price }}</div>
        <div class="original-price" v-if="getGoods.min_price != 0 && getGoods.min_price !== getGoods.market_price">￥{{ getGoods.market_price }}</div>
        <div class="delivery" v-if="canTake">门店自提</div>
        <div class="delivery" v-if="canShip">商家配送</div>
        <div class="delivery" v-if="canSame">快递</div>
      </div>
      <div class="goods-title ell">
        {{ getGoods.title }}
      </div>
      <div class="goods-inventory flex-j-sb">
        <span>库存{{ getGoods.stock }}</span>
        <span v-if="getGoods.is_month_sales">月销量{{ getGoods.month_sales }}</span>
        <span>总销量{{ getGoods.show_sales }}</span>
      </div>
    </div>

    <div class="specification flex-a-c" @click="cakeGoodsBuy">
      <div class="attribute">规格</div>
      <div class="value" v-if="optionsObj.title">已选：{{ optionsObj.title }}</div>
    </div>

    <div class="distribution flex-a-c flex-j-sb" @click="deliveryClick" v-if="shipAreaType == '1' || (shipAreaType == '2' && shopList.length > 0)">
      <div class="title">查看配送范围</div>
      <span class="iconfont icon-advertise-next"></span>
    </div>
    <div class="delivery-area" v-if="description">
      <div class="title">配送范围</div>
      <div class="content">{{ description }} <span v-if="supplyCakeGoods.is_greeting === 0">生日祝福语不支持自定义</span></div>
    </div>

    <div class="general flex-a-c flex-j-sb">
      <div class="general-left flex-a-c">
        <img :src="cakeGoods.brand && cakeGoods.brand.logo" />
        <div class="general-text">
          <span class="store-name">{{ cakeGoods.brand && cakeGoods.brand.name }}</span>
        </div>
      </div>
      <div class="general-right">
        <div class="general-btn" @click="brandNav(cakeGoods.brand && cakeGoods.brand.id)">详情</div>
      </div>
    </div>

    <div class="group-code flex-j-sb flex-a-c" v-if="groupCode && groupCode.goods_entrance == 1">
      <div class="group-left flex-a-c">
        <img :src="groupCode.code_logo" />
        <div class="group-text flex">
          <span class="store-name">{{ groupCode.code_title }}邀请您添加专属福利群1</span>
          <span class="store-text">{{ groupCode.citation_copy }}</span>
        </div>
      </div>
      <div class="general-right">
        <div class="group-btn" @click="toGroupCode">去加群</div>
      </div>
    </div>

    <div class="goods-detail">
      <div class="title flex-a-c flex-j-c">
        <span class="line-left"></span>
        <span>商品详情页</span>
        <span class="line-right"></span>
      </div>
      <div class="detail-content" v-html="getGoods.content"></div>
    </div>

    <!--海报悬浮按钮-->
    <!-- :style="iPnoneBottomBol ? 'padding-bottom: 34px;' : '10px'"  -->
    <div class="mb-50"></div>
    <div class="sachertorte-footer flex-j-sb">
      <div class="sachertorte-left flex-a-c">
        <div class="footer-icon flex-a-c" @click="onIndex">
          <span class="iconfont icon-dianpu"></span>
          <span class="footer-text">首页</span>
        </div>
        <div class="footer-icon flex-a-c" @click="onService">
          <span class="iconfont icon-fontclass-kefu"></span>
          <span class="footer-text">客服</span>
        </div>
      </div>
      <div class="sachertorte-right flex-a-c">
        <div v-if="beginStatus === -1" class="sachertorte-btn can-buy">立即订购</div>
        <div class="sachertorte-btn" @click="cakeGoodsBuy" v-else>立即订购</div>
      </div>
    </div>

    <div class="backUp" @click="posterClick">
      <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/bc_eweima.png" />
    </div>

    <!--海报-->
    <yz-goodsposter v-model="posterShow" :posterData="isFrontCanvas ? posterImg : {}" :defaultImg="!isFrontCanvas ? posterImg : ''" :gid="goodsId" :goodstype="true"></yz-goodsposter>
    <yz-specs class="componentsThemeColor" :goodsInfo="getGoods" v-model="popupSpecs" cakeSpecs="cakeSpecs" @closeSpecsPopup="close_yz_specs_popup" @selectSpecs="selectSpecsOn">
      <template v-slot:submitSpecs>
        <van-button color="#999999" type="danger" size="small" id="btsmall" disabled v-if="beginStatus === -1 || optionsId === ''">
          确认
        </van-button>
        <van-button type="danger" size="small" id="btsmall" v-else @click="submitAction">确认</van-button>
      </template>
    </yz-specs>
    <!-- 客服插件-->
    <yz-service v-model="serviceShow" :url="cservice" :mobile="serviceMobile" :qr="serviceQRcode"></yz-service>
  </div>
</template>
<script>
import sachertorteGoods_controller from "./sachertorteGoods_controller.js";
export default sachertorteGoods_controller;
</script>
<style scoped lang="scss">
#yz_specs #btsmall {
  width: 94%;
  border-radius: 0.375rem;
  height: 3.0625rem;
  font-size: 16px;
  margin-bottom: 0.375rem;
}

.pcStyle #sachertorteGoods .backUp {
  position: fixed !important;
  left: 50%;
  top: 50vh;
}

.goods-img ::v-deep .swiper-pagination {
  left: 50%;
  transform: translateX(-50%);
  bottom: 20px;
  z-index: 120;
}

.goods-img ::v-deep .swiper-purchase {
  bottom: 72px;
}

.goods-img ::v-deep .swiper-pagination-bullet-active {
  background-color: #e32323;
}

.goods-img ::v-deep .swiper-pagination-bullet {
  margin-right: 12px;
}

.goods-detail ::v-deep .detail-content img {
  max-width: 100% !important;
  height: auto !important;
  display: block;
  border: 0 !important;
}

/* packageF/sachertorte/sachertorteGoods/sachertorteGoods.wxss */
#sachertorteGoods {
  position: relative;
}

.mb-50 {
  height: 3.125rem;
  clear: both;
}

.ell {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* 修改组件的样式 */
.goods-time {
  text-align: right;
  flex: 2;
  flex-wrap: wrap;
  color: #fff;
  font-size: 0.75rem;
  line-height: 1.0625rem;

  .van-count-down {
    line-height: 1.0625rem;
  }

  .days {
    font-size: 0.75rem;
    line-height: 1.0625rem;
    color: #fff;
    padding: 0 0.25rem;
  }

  .time-wrap {
    flex-wrap: wrap;
  }
}

/* 商品详情图片 */
.goods-img {
  width: 100%;
  position: relative;
  // background-color: rgba(0, 0, 0, 0.5);
  img {
    width: 100%;
  }

  .goods-img-top {
    width: 100%;
    padding: 1rem 0.75rem 0 0.75rem;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
  }
}

.goods-img-top {
  .goods-next {
    width: 1.5rem;
    height: 1.5rem;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
  }
}

.goods-img-top .goods-next .icon-member-left,
.icon-fontclass-huiyuanzhongxin {
  color: #fff;
  font-size: 0.75rem;
  line-height: 0.75rem;
}

.goods-img-bootom {
  width: 100%;
  padding: 0 0.4375rem;
  box-sizing: border-box;
  background-color: #e32323;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 99;

  .cake-goods {
    width: 1.8125rem;
    height: 3.75rem;

    img {
      width: 1.8125rem;
      height: 3.75rem;
    }
  }

  .time-title {
    font-size: 0.75rem;
    line-height: 1.0625rem;
    color: #fff;
  }

  .goods-logo {
    flex-direction: row;

    img {
      width: 4.375rem;
      height: 1.4375rem;
      margin-right: 0.25rem;
    }

    .icon-naozhong {
      color: #fff;
      font-size: 1.5rem;
    }
  }
}

.time-item {
  font-size: 0.75rem;
  font-weight: bold;
  line-height: 1.0625rem;
  padding: 0.25rem 0.5rem;
  color: #e32323;
  box-shadow: 0rpx 6rpx 12rpx rgba(194, 28, 13, 0.16);
  background-color: #fff;
  border-radius: 0.375rem;
}

.time-label {
  font-size: 0.75rem;
  line-height: 1.0625rem;
  color: #fff;
  text-align: center;
  padding: 0 0.125rem 0 0.125rem;
}

/* 商品信息 */
.goods-designation {
  margin: 0.75rem 0.75rem 0.5rem 0.75rem;
  padding: 0.75rem;
  background-color: #fff;

  .goods-price {
    flex-wrap: wrap;
  }

  .price {
    font-size: 1.25rem;
    font-weight: bold;
    line-height: 1.75rem;
    color: #e32323;
    padding: 0 0.25rem 0 0;

    span {
      font-size: 0.75rem;
    }
  }

  .original-price {
    font-size: 0.75rem;
    line-height: 1.0313rem;
    color: #999;
    padding: 0 0.5rem 0 0.25rem;
    text-decoration: line-through;
  }

  .delivery {
    font-size: 0.75rem;
    line-height: 1.0625rem;
    color: #e32323;
    padding: 0.125rem 0.5rem;
    background: rgba(235, 43, 30, 0.1);
    border-radius: 0.625rem;
    margin:0 0.3125rem 0 0;
  }
}

.goods-title {
  text-align: left;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #333;
  padding: 0.875rem 0 1.25rem 0;
}

.goods-inventory {
  span {
    font-size: 0.75rem;
    line-height: 1.0625rem;
    color: #333;
  }
}

.specification {
  background-color: #fff;
  padding: 0.75rem;
  margin: 0 0.75rem 0.5rem 0.75rem;
  border-radius: 0.5rem;

  .attribute {
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: #999;
    padding: 0 1.25rem 0 0;
  }

  .value {
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: #e32323;
  }
}

/* 配送样式 */
.distribution {
  margin: 0 0.75rem 0.5rem 0.75rem;
  padding: 0.75rem 0.5rem 0.75rem 0.75rem;
  background-color: #fff;
  border-radius: 0.5rem;

  .title {
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: #333;
  }
}

.delivery-area {
  text-align: left;
  margin: 0 0.75rem;
  background-color: #fff;
  border-radius: 0.5rem;

  .title {
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: #333;
    padding: 0.75rem 0 0.5rem 0.75rem;
  }

  .content {
    font-size: 0.75rem;
    line-height: 1.0625rem;
    color: #999;
    padding: 0 0.9375rem 0.5rem 0.75rem;
    border-bottom: 2rpx solid #e7e7e7;
  }
}

.delivery-time {
  padding: 0.4375rem 0 0.4375rem 0.75rem;

  .icon-qhm_record {
    color: #e32323;
    padding: 0 0.25rem 0 0;
  }

  .title-dec {
    font-size: 0.625rem;
    line-height: 0.875rem;
    color: #e32323;
  }
}

/* 门店样式 */
.general {
  background-color: #fff;
  margin: 0.5rem 0.75rem 0.5rem 0.75rem;
  padding: 0.75rem;
  border-radius: 0.5rem;
}

.general-left {
  img {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    margin-right: 0.5rem;
  }

  .store-name {
    text-align: left;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: #333;
  }
}

.general-btn {
  font-size: 0.75rem;
  line-height: 1.0625rem;
  color: #e32323;
  padding: 0.25rem 1.38rem;
  border: 1px solid #e32323;
  border-radius: 1.0625rem;
}

.group-code {
  margin: 0 0.75rem 0.75rem 0.75rem;
  background-color: #fff;
  padding: 0.75rem;
  border-radius: 0.5rem;

  .group-left {
    flex: 2;

    img {
      width: 2.25rem;
      height: 2.25rem;
      min-width: 2.25rem;
      max-width: 2.25rem;
      border-radius: 50%;
    }

    .store-name {
      text-align: left;
      font-size: 0.75rem;
      line-height: 1.0625rem;
      color: #333;
    }
  }
}

.group-text {
  text-align: left;
  flex-direction: column;
  padding: 0 1.8125rem 0 0.5rem;
}

.store-text {
  font-size: 0.625rem;
  line-height: 0.875rem;
  color: #999;
  padding: 0.5rem 0 0 0;
}

.group-btn {
  font-size: 0.75rem;
  line-height: 1.0625rem;
  color: #fff;
  padding: 0.25rem 1rem;
  background-color: #e32323;
  border-radius: 1.0625rem;
}

/* .group-code  */
.goods-detail {
  .title {
    text-align: center;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: #333;
    padding: 0 0 0.75rem 0;
  }
}
// .title {
//   text {
//     position: relative;
//   }
// }

/* .goods-detail .title text::after {
  content: '';
  width: 1.75rem;
  height: 0.125rem;
  border-bottom: 0.125rem solid #CCCCCC;
  top:50%;
  left:0;
  position:absolute;
} */
.line-left,
.line-right {
  width: 1.75rem;
  height: 0.125rem;
  border-bottom: 0.125rem solid #ccc;
}

.line-left {
  display: block;
  margin-right: 0.75rem;
}

.line-right {
  margin-left: 0.75rem;
}

.sachertorte-footer {
  width: 23.4375rem;
  box-sizing: border-box;
  position: fixed;
  bottom: 0;
  background-color: #fff;
  padding: 0.5rem 0;
}

.sachertorte-left {
  width: 28%;
  // padding: 0 1.4375rem 0 0;
  .footer-icon {
    flex-direction: column;
    width: calc((100%) / 2);
    // padding: 0 0 0 1.5rem;
    .footer-text {
      font-size: 0.625rem;
      line-height: 0.875rem;
      color: #333;
    }
  }
}

.sachertorte-right {
  width: 72%;
  box-sizing: border-box;
  justify-content: flex-end;
  padding: 0 1.5rem 0 0;
}

.sachertorte-btn {
  font-size: 0.75rem;
  line-height: 1.0625rem;
  color: #fff;
  padding: 0.5rem 6rem;
  background-color: #e32323;
  border-radius: 0.25rem;
}

.can-buy {
  color: #333;
  background-color: #f3f3f3;
}

/* 海报按钮 */
.backUp {
  position: fixed;
  top: 65%;
  transform: translateY(-50%);
  right: 0;
  z-index: 99;

  img {
    width: 2.1875rem;
    height: 2.1875rem;
  }
}

.subbtn {
  line-height: 3.125rem;
  width: 94%;
  border-radius: 0.3125rem;
  margin: 0 auto 0.3125rem auto;
  text-align: center;
  background: #ee0a24;
  color: #fff;
  font-size: 0.9375rem;
}
</style>
